<template>
  <div class="modal-body">
    <div class="row justify-content-center">
      <div class="col-md-8">
        <b-alert show data-cy="loginError" variant="danger" v-if="authenticationError" v-html="$t('login.messages.error.authentication')">
          <strong>Failed to sign in!</strong> Please check your credentials and try again.
        </b-alert>
      </div>
      <div class="col-md-8">
        <b-form role="form" v-on:submit.prevent="doLogin()">
          <b-form-group v-bind:label="$t('global.form[\'username.label\']')" label-for="username">
            <b-form-input
              id="username"
              type="text"
              name="username"
              autofocus
              v-bind:placeholder="$t('global.form[\'username.placeholder\']')"
              v-model="login"
              data-cy="username"
            >
            </b-form-input>
          </b-form-group>
          <b-form-group v-bind:label="$t('login.form.password')" label-for="password">
            <b-form-input
              id="password"
              type="password"
              name="password"
              v-model.trim="name"
              v-bind:placeholder="$t('login.form[\'password.placeholder\']')"
              v-model="password"
              data-cy="password"
            >
            </b-form-input>
          </b-form-group>
          <b-form-checkbox id="rememberMe" name="rememberMe" v-model="rememberMe" checked>
            <span v-text="$t('login.form.rememberme')">Remember me</span>
          </b-form-checkbox>
          <div>
            <b-button data-cy="submit" type="submit" variant="primary" v-text="$t('login.form.button')">Sign in</b-button>
          </div>
        </b-form>
        <p></p>
        <div>
          <b-alert show variant="warning">
            <b-link
              :to="'/account/reset/request'"
              class="alert-link"
              v-text="$t('login.password.forgot')"
              data-cy="forgetYourPasswordSelector"
              >Did you forget your password?</b-link
            >
          </b-alert>
        </div>
        <div>
          <b-alert show variant="warning">
            <span v-text="$t('global.messages.info.register.noaccount')">You don't have an account yet?</span>
            <b-link :to="'/register'" class="alert-link" v-text="$t('global.messages.info.register.link')">Register a new account</b-link>
          </b-alert>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" src="./login-form.component.ts"></script>
